<template>
  <div class="market">
    <el-row :gutter="20" style="margin-left: 3px;">
      <el-col :span="11">
        <el-card class="box-card" style="">
          <div slot="header" class="clearfix">
            <span class="card-title">当前碳资产</span>
          </div>
          <div>
            <ECharts style="height: 313px;" ref="chart" :option="curAsserts"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="13">
        <el-col :span="12">
          <el-card class="box-card" style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
              <span class="card-title">本年度CCER总量（t）</span>
            </div>
            <img src="@/assets/病毒.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 4vh;font-weight: lighter;">{{ carbonData.ccer.toFixed(2) }}</span>
            </div>
          </el-card>
          <el-card class="box-card" style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
              <span class="card-title">本年度配额总量（t）</span>
            </div>
            <img src="@/assets/花.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 4vh;font-weight: lighter;">{{ carbonData.quota.toFixed(2) }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
              <span class="card-title">年度政府发放配额（t）</span>
            </div>
            <img src="@/assets/尿液.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 4vh;font-weight: lighter;">{{ carbonData.govQuota.toFixed(2) }}</span>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="card-title">应清缴碳配额（t）</span>
            </div>
            <img src="@/assets/叶.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 4vh;font-weight: lighter;">{{ carbonData.needPayQuota.toFixed(2) }}</span>
            </div>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card" style="margin-left: 13px;">
          <div slot="header" class="clearfix">
            <span class="card-title">碳资产与实际排放对比</span>
          </div>
          <ECharts style="height: 38vh;float:right;" ref="chart" :option="chart1"/>
          <ECharts style="height: 38vh;" ref="chart" :option="chart1"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="margin-right: 10px">
          <div slot="header" class="clearfix">
            <span class="card-title">碳资产交易对比</span>
          </div>
          <ECharts style="height: 38vh;" ref="chart" :option="chart2"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {editTarget, enableTarget, queryTargetPage, unEnableTarget} from "@/api/carbon-manage/target";
import {listStage} from "@/api/carbon-manage/data";
import {queryAllProcess} from "@/api/carbon-manage/process";
import {
  carbonEmissionCompare,
  queryCarbonAssertInfo,
  queryCarbonTradeCompare,
  queryCurrentCarbonAssert
} from "@/api/carbon-manage/trade";

export default {
  data() {
    return {
      carbonData: {},
      curAsserts: {},
      chart1: {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', '年度累计碳排放量（t）', '当前可用CCER（t）', '当前可用碳配额（t）'],
          source: [
            {
              product: '碳资产与实际排放对比',
              '年度累计碳排放量（t）': 43.3,
              '当前可用CCER（t）': 85.8,
              '当前可用碳配额（t）': 93.7
            },
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
      },
      chart2: {},


    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      carbonEmissionCompare().then(res => {
        let data = res.data;
        this.chart1 = {
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: ['product', '年度累计碳排放量（t）', '当前可用CCER（t）', '当前可用碳配额（t）'],
            source: [
              {
                product: '碳资产与实际排放对比',
                '年度累计碳排放量（t）': data.yearEmission,
                '当前可用CCER（t）': data.ableCcer,
                '当前可用碳配额（t）': data.ableQuota
              },
            ]
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
        }
      });
      queryCarbonAssertInfo().then(res => {
        this.carbonData = res.data;
      });
      queryCarbonTradeCompare().then(res => {
        console.log(res.data);

        this.chart2 = {
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.data.map(item => item.month + "月")
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '碳资产买入',
              type: 'line',
              stack: 'Total',
              data: res.data.map(item => item.buy)
            },
            {
              name: '碳资产卖出',
              type: 'line',
              stack: 'Total',
              data: res.data.map(item => item.sell)
            }
          ]
        }


      });
      queryCurrentCarbonAssert().then(res => {
        let data = res.data;
        this.curAsserts = {
          tooltip: {
            trigger: 'item'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          legend: {
            top: '5%',
            left: 'left',
            orient: 'vertical'
          },
          series: [
            {
              name: '碳资产',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: data.quota, name: '配额'},
                {value: data.ccer, name: 'CCER'},
              ]
            }
          ]
        }
      })
    },
  },

}
</script>

<style scoped lang="scss">
.market {
  margin: 10px;
}

.card-title {
  font-family: 微软雅黑;
  font-weight: bolder;
}

.img_size {
  width: 10vh;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
